<template>
  <a-modal
    title="关联规则版本"
    :width="1000"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => ok()"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form
        :form="form"
        v-bind="formLayout">
        <h2>版本</h2>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="选择绩效规则版本">
              <a-cascader
                v-decorator="[`version`,{ rules: [{ required: true, message: '请选择绩效规则' }] }]"
                :options="versions"
                placeholder="请选择绩效规则版本" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { Cascader } from 'ant-design-vue'
import { Ellipsis } from '@/components'
import { getYearsVersion } from '@/api/performanceConfig'
// 表单字段
const fields = ['version']

export default {
  components: {
    Ellipsis,
    'a-cascader': Cascader
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    isAdd: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 13 }
      }
    }
    return {
      initVersion: [],
      versions: [],
      form: this.$form.createForm(this)
    }
  },
  mounted () {
    this.getYears()
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
  },
  watch: {
  },
  methods: {
    ok () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('ok', values)
        }
      })
    },
    getYears () {
      getYearsVersion().then(res => {
        const years = res.data.actualYearVersion.map(item => item.year)
        this.versions = years.map(year => {
          const children = res.data.actualYearVersion.find(item => item.year === year).version || []
          return {
              label: year,
              value: year,
              children: children.map(item => ({ label: item, value: item }))
            }
        })
      })
    }
  }
}
</script>
